<template>
	<view class="container">
		<view class="steps">
			<u-steps :current="updateStep" activeColor="#FFD03D">
				<u-steps-item :title="updateType==0?$t('valid_email'):$t('valid_phone')"></u-steps-item>
				<u-steps-item :title="$t('set_new_password')"></u-steps-item>
				<u-steps-item :title="$t('complete')"></u-steps-item>
			</u-steps>
		</view>
		<view class="form">
			<!-- 手机号第一步 -->
			<view class="form-user" v-if="updateType==1 && updateStep==0">
				<view class="form-user-three d-rn d-ac">
					<picker @change="changePhoneType" :range="phoneTypeOptions" range-key="dictLabel" class="picker">
						<view style="font-size: 30rpx;color: #999999;">{{form.areaCode}}</view>
					</picker>
					<image src="../../static/img/select.png" mode=""
						style="width: 12rpx;height: 7rpx;margin-top: 8rpx;margin-left: 10rpx; margin-right: 20rpx;"></image>

					<input type="number" :placeholder="$t('Please_enter_phone_number')" placeholder-style="color:#CCD0D4;" v-model="form.username">
				</view>
				<view class="form-user-three d-rn d-ac">
					<input type="text" :placeholder="$t('Please_enter_verification_code')" placeholder-style="color:#CCD0D4;" v-model="form.code">

					<u-code class="code" ref="phoneCode" @change="phoneCodeChange" keep-running :startText="$t('send_captcha')" :endText="$t('resend_captcha')"
						unique-key="pwdPhone"></u-code>
					<view class="code" @tap="getPhoneCode">{{phoneTips}}</view>

				</view>
			</view>
			<!-- 邮箱第一步 -->
			<view class="form-user" v-if="updateType==0 && updateStep==0">
				<view class="form-user-three d-rn d-ac">
					<input type="text" :placeholder="$t('enter-email')" placeholder-style="color:#CCD0D4;" v-model="form.username">
				</view>
				<view class="form-user-three d-rn d-ac">
					<input type="text" :placeholder="$t('enter_captcha')" placeholder-style="color:#CCD0D4;" v-model="form.code">

					<u-code class="code" ref="emailCode" @change="emailCodeChange" keep-running :startText="$t('send_captcha')" :endText="$t('resend_captcha')"
						unique-key="pwdEmail"></u-code>
					<view class="code" @tap="getEmailCode">{{emailTips}}</view>

				</view>
			</view>

			<!-- 第二步重置密码 -->
			<view class="form-user" v-if="updateStep == 1">
				<view class="form-user-three d-rn d-ac">
					<input type="number" :placeholder="$t('new_password')" placeholder-style="color:#CCD0D4;" v-model="form.password">
				</view>
				<view class="form-user-three d-rn d-ac">
					<input type="text" :placeholder="$t('Please_enter_password_again')" placeholder-style="color:#CCD0D4;" v-model="rpassword">
				</view>
			</view>

			<!-- 第三步重置成功 -->
			<view class="form-success d-cw d-ac" v-if="updateStep == 2">
				<image src="../../static/logo.png" mode=""></image>
				<text>{{ $t('New_password_setting_successful') }}</text>
			<text>{{ $t('Please_remember_your_new_password') }}</text>
			</view>

			<!-- 按钮部分 -->
			<view class="form-btn d-rn d-ac d-jc" @click="goLogin" v-if="updateStep==2">
				<text class="d-rn d-ac d-jc">{{ $t('re_login') }}</text>
			</view>
			<view class="form-btn d-rn d-ac d-jc" @click="nextStep" v-else>
				<text class="d-rn d-ac d-jc">{{ $t('next_step') }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendEmailCode,
		sendPhoneCode,
		checkCode,
		updatePwd
	} from '@/api/mine.js'
	export default {
		data() {
			return {
				updateType: 0,
				updateStep: 0,
				phoneTypeOptions: [],
				emailTips: '',
				phoneTips: '',
				showLogin: false,
				form: {
					username: null,
					code: null,
					password: null,
					areaCode: null,
					loginType: null
				},
				rpassword: null
			}
		},
		onLoad(options) {
			this.updateType = options.type || 0
			this.getOptions()
		},
		methods: {
			async getOptions() {
				this.phoneTypeOptions = await this.getDictionaryData('mobile_area_code')
				this.form.areaCode = this.phoneTypeOptions[0].dictValue
			},
			/*切换手机号类型*/
			changePhoneType(e) {
				const index = e.detail.value;
				this.form.areaCode = this.phoneTypeOptions[index].dictValue
			},
			/*发送邮箱验证码*/
			getEmailCode() {
				if (uni.$u.test.email(this.form.username)) {
					if (this.$refs.emailCode.canGetCode) {
						sendEmailCode({
							email: this.form.username,
						}).then(res => {
							uni.$u.toast(this.$t('captcha_sent'));
							this.$refs.emailCode.start();
						})
					} else {
						uni.$u.toast(this.$t('wait_countdown'));
					}
				} else {
					uni.$u.toast(this.$t('enter_valid_email'));
				}
			},

			emailCodeChange(text) {
				this.emailTips = text;
			},

			/*发送手机验证码*/
			getPhoneCode() {
				if (this.form.username) {
					if (this.$refs.phoneCode.canGetCode) {
							// phone: this.form.areaCode + this.form.username,
						sendPhoneCode({
							phone:this.form.areaCode + this.form.username,
						}).then(res => {
							uni.$u.toast(this.$t('captcha_sent'));
							this.$refs.phoneCode.start();
						})
					} else {
						uni.$u.toast(this.$t('wait_countdown'));
					}
				} else {
					uni.$u.toast(this.$t('enter_phone'));
				}
			},

			phoneCodeChange(text) {
				this.phoneTips = text;
			},
			// 下一步
			nextStep() {
				this.form.loginType = this.updateType == 0 ? 1 : 2;
				if (this.updateStep == 0) {
					if (!this.form.username) {
						uni.$u.toast(this.updateType==0?this.$t('enter-email'):this.$t('enter_phone'));
					} else if (!this.form.code) {
						uni.$u.toast(this.$t('enter_captcha'));
					} else {
						checkCode(this.form).then(res => {
							this.updateStep = 1;
						})
					}
				} else if (this.updateStep == 1) {
					if (!this.form.password) {
						uni.$u.toast(this.$t('enter-password'));
					} else if (this.form.password.length < 6 || this.form.password.length > 20) {
						uni.$u.toast(this.$t('new_password'));
					} else if (!this.rpassword) {
						uni.$u.toast(this.$t('Please_enter_password_again'));
					} else if (this.form.password != this.rpassword) {
						uni.$u.toast(this.$t('The_two_passwords_entered_are_inconsistent'));
					}else{
						updatePwd({
							password: this.form.password,
							username: this.form.username
						}).then(res => {
							this.updateStep = 2;
						})
					}
				}
			},
			goLogin() {
				uni.reLaunch({
					url:'/pages/login/index'
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;

		.steps {
			width: 90%;
			margin: 0 auto;
			padding: 48rpx 0;

		}

		.form {
			width: 80%;
			margin: 0 auto;

			&-user {
				&-three {
					border-radius: 2em;
					background-color: #F6F6F6;
					padding: 30rpx 60rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					input {
						font-size: 30rpx;
						color: #666;
						flex: 1;
					}

					image:nth-of-type(2) {
						width: 138rpx;
						height: 56rpx;
					}

					.code {
						color: #FDB911;
						font-size: 28rpx;
					}
				}
			}

			&-success {
				margin-top: 99rpx;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 2rem;
				}

				text:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					margin: 24rpx 0 12rpx 0;
				}

				text:nth-of-type(1) {
					font-size: 34rpx;
					color: #999999;
				}
			}

			&-btn {
				margin-top: 98rpx;

				text {
					width: 100%;
					height: 90rpx;
					background: #FFDB33;
					border-radius: 2em;
					font-size: 36rpx;
				}
			}


		}

	}
</style>